<template>
  <div class="success-container-main">
    <div class="order-su">
      <i class="el-icon-success" />
      <span class="text-bold title text-sm">恭喜您的订单支付成功</span>
    </div>
    <div class="order-det">
      <div class="title-detail text-bold padding-bottom-sm">订单详情：</div>

      <el-descriptions class="margin-top" :title="orderDetail.title" :column="3" :size="size" border>
        <template slot="extra">
          <el-button v-for="(i, num) in acList" :key="num" type="primary" size="small" @click="changetype(num)">{{ i.name }}</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            订单编号：
          </template>
          {{ orderDetail.order_number }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            支付金额：
          </template>
          {{ orderDetail.pay_price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            授权开始时间
          </template>
          {{ orderDetail.start_time }}

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            授权结束时间
          </template>
          {{ orderDetail.end_time }}

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            下单时间
          </template>
          <el-tag size="small">{{ orderDetail.create_time }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    orderDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      order_id: 0,
      detail: '',
      acList: [
        {
          name: '操作手册',
          icon: 'diandi_subscription-help-index'
        },
        {
          name: '房态管理',
          icon: 'place-Hotel-Advertising'
        }
      ]
    }
  },
  methods: {
    changetype(num) {
      const that = this
      console.log(num)
      that.typenum = num
      if (num === 0) {
        that.$emit('closePage', {
          name: 'diandi-subscription-help-list'
        })
      } else if (num === 1) {
        that.goAddons({
          identifie: 'diandi_place'
        })
      }
    },
    goAddons: function(item) {
      const menuType = item.identifie
      this.$store.dispatch('settings/setMenuType', menuType)
      this.$store.dispatch('settings/setPlugins', item)
      const path = '/' + menuType + '/default/index.vue'
      console.log('path', path, item)
      this.$emit('closePage', {
        name: 'diandi-place-default-index'
      })
    },
    goshop() {
      const that = this
      that.$router.push({
        name: 'service-subscription'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.success-container-main {
  margin-top: 50px;
  color: #212121;
}
.order-su {
  margin: 0 auto;
  font-size: 56px;
  /* color: #ff0000; */
  display: flex;
  width: 316px;
  .el-icon-success{
    color: #191b5c;
  }
}
.title {
  color: #212121;
  line-height: 56px;
  margin-left: 16px;
}
.order-det {
  width: 100%;
  height: 251px;
  background: #ffffff;
  border-radius: 4px;
  padding: 40px 22px;
}
.title-detail {
  font-size: 17px;
  width: 100%;
  border-bottom: 1px solid rgb(112, 112, 112, 0.3);
}
.pay-detal {
  padding: 54px 38px 0;
  font-size: 15px;
}
.shop-btn {
  width: 90px;
  height: 46px;
  line-height: 46px;
  background: #191b5c;
  border-radius: 4px;
  font-size: 13px;
  margin: 91px auto;
}
</style>
